<!--vue语法-->
<link rel="stylesheet" href="../css/main.css">
<link rel="stylesheet" href="../css/element.css">
<!-- 引入组件库 -->
<script type="text/javascript" src="../js/vue.min.js"></script>

<div class="layout">
<h2>模板语法</h2>
<h3>文本</h3>
<p>文本对象动态绑定和非动态绑定。直接引用当数据改变时，页面展示同步更改。</p>
<div class="context-box">
  <xmp>
    <span>Message: {{ msg }}</span>
  </xmp>
</div>

<p>通过v-once指令，页面只初始化一次，后续数据改变，页面不同步。使用时注意其他节点上绑定的数据。</p>
<div class="context-box">
  <xmp>
    <span v-once>这个将不会改变: {{ msg }}</span>
  </xmp>
</div>


<h3>原始HTML</h3>
<p>双大括号会将数据解释为普通文本，而非HTMLdiam。为了输出真正的HTML，使用v-html指令</p>
<div id="app">
  <p>vue代码实例</p>
  <p>Using mustaches: {{ rawHtml }}</p>
  <p>Using v-html directive: <span v-html="rawHtml"></span></p>
</div>
<div class="context-box">
  <xmp>
    <p>Using mustaches: {{ rawHtml }}</p>
    <p>Using v-html directive: <span v-html="rawHtml"></span></p>
  </xmp>
</div>


<h2>指令</h2>
<h3>参数</h3>
<p>一些指令能够接收一个“参数”，在指令名称之后以冒号表示。例如，v-bind 指令可以用于响应式地更新 HTML attribute，在这里 href 是参数，告知 v-bind 指令将该元素的 href attribute 与表达式 url 的值绑定。</p>
<div class="context-box">
  <xmp>
    <a v-bind:href="url">...</a>
  </xmp>
</div>
<p>另一个例子是 v-on 指令，它用于监听 DOM 事件：</p>
<div class="context-box">
  <xmp>
    <a v-on:click="doSomething">...</a>
  </xmp>
</div>

<h3>动态参数（2.6.0新增）</h3>
<p>从 2.6.0 开始，可以用方括号括起来的 JavaScript 表达式作为一个指令的参数，这里的 attributeName 会被作为一个 JavaScript 表达式进行动态求值，求得的值将会作为最终的参数来使用。例如，如果你的 Vue 实例有一个 data property attributeName，其值为 "href"，那么这个绑定将等价于 v-bind:href。</p>
<div class="context-box">
  <xmp>
    <!--
    注意，参数表达式的写法存在一些约束，如之后的“对动态参数表达式的约束”章节所述。
    -->
    <a v-bind:[attributeName]="url"> ... </a>
  </xmp>
</div>

<h2>缩写</h2>
<p>v- 前缀作为一种视觉提示，用来识别模板中 Vue 特定的 attribute。当你在使用 Vue.js 为现有标签添加动态行为 (dynamic behavior) 时，v- 前缀很有帮助，然而，对于一些频繁用到的指令来说，就会感到使用繁琐。同时，在构建由 Vue 管理所有模板的单页面应用程序 (SPA - single page application) 时，v- 前缀也变得没那么重要了。因此，Vue 为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写：</p>
<h3>v-bind缩写</h3>
<div class="context-box">
  <xmp>
    <!-- 完整语法 -->
    <a v-bind:href="url">...</a>

    <!-- 缩写 -->
    <a :href="url">...</a>

    <!-- 动态参数的缩写 (2.6.0+) -->
    <a :[key]="url"> ... </a>
  </xmp>
</div>

<h3>v-on缩写</h3>
<div class="context-box">
  <xmp>
    <!-- 完整语法 -->
    <a v-on:click="doSomething">...</a>

    <!-- 缩写 -->
    <a @click="doSomething">...</a>

    <!-- 动态参数的缩写 (2.6.0+) -->
    <a @[event]="doSomething"> ... </a>
  </xmp>
</div>

<h3><a target="_blank" href="https://cn.vuejs.org/v2/guide/syntax.html#v-bind-%E7%BC%A9%E5%86%99">参考网页</a></h3>
</div>
<script>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!This First Model',
    rawHtml: '<span style="color:red">代码实例</span>'
  }
})


</script>

